<template>
  <div class="booking-index-nav">
    <!--  左侧  -->
    <div class="booking-index-nav-left">
      <div
        v-for="(item, index) in bizType"
        :class="{active: curTab === item}"
        @click="curTab = item"
      >
        {{item.name}}
      </div>
    </div>
    <!--  右侧  -->
    <div class="booking-index-nav-right">
      <div v-for="(item, index) in bizType" :class="{active: curTab === item}">
        <!--  右侧头部  -->
        <div class="booking-index-nav-tab">
          <div
            v-for="(tab, index) in item.tab"
            :class="{active: item.activeTab === index}"
            @click="item.activeTab = index"
          >
            <span>{{tab.name}}</span>
          </div>
        </div>
        <!--  右侧内容  -->
        <div class="booking-index-nav-cont" :style="{transform: `translateX(-${item.activeTab * 100}%)`}">
          <div v-for="(tab, index) in item.tab" :class="{active: item.activeTab === index}">
            <!--  <div v-for="(tab, index) in item.tab">-->
            <span>{{tab.formType}}</span>
            <!-- </div> -->
          </div>
        </div>
      </div>
    </div>
    <!--  用户信息  -->
    <div class="user-info">
      <div>
        <span>蔡伟超的职级</span>
        <span>经理</span>
      </div>
      <div>
        <span>席位限制</span>
        <span>经济舱</span>
      </div>
      <div>
        <span>折扣限制</span>
        <span>五折</span>
      </div>
      <div>
        <span>超出差旅标准</span>
        <span></span>
      </div>
      <div>
        <span>未提前预定</span>
        <span></span>
      </div>
      <div>
        <span>说明理由</span>
        <span>差旅计划未通过时紧急预订</span>
      </div>

    </div>
  </div>
</template>

<script>

  const bizType = {
    flight: {
      name: '飞机', key: 'flight', activeTab: 0,
      tab: [{name: '国内', formType: 'native'}, {name: '国际', formType: 'inter'}],
    },
    hotel: {
      name: '酒店', key: 'hotel', activeTab: 0,
      tab: [{name: '国内', formType: 'native'}, {name: '国际', formType: 'inter'}],
    },
    train: {
      name: '火车', key: 'train', activeTab: 0,
      tab: [{name: '国内', formType: 'native'}],
    },
    car: {
      name: '租车', key: 'car', activeTab: 0,
      tab: [{name: '提交需求', formType: 'inter'}],
    },
    mark: {
      name: '签证', key: 'mark', activeTab: 0,
      tab: [{name: '提交需求', formType: 'inter'}],
    },
    meeting: {
      name: '会议', key: 'meeting', activeTab: 0,
      tab: [{name: '提交需求', formType: 'inter'}],
    },
  }
  const formMap = {
    native: {
      switch: {select: '', list: [{name: '因公'}, {name: '因私'}]},
      radios: {select: '', list: [{name: '单程'}, {name: '往返'}, {name: '多程（含缺口）'}]},
      cities: [{time: '', place: {name: '上海'}}, {time: '', place: {name: '北京'}}],
    },
    inter: {
      inputs: [
        {label: '出行类别', key: 'travelType', val: '', placeholder: ''},
        {label: '费用归属', key: 'travelType', val: '', placeholder: ''},
        {label: '服务类型', key: 'serviceType', val: '', placeholder: ''},
        {label: '出行人数', key: 'serviceType', val: '', placeholder: ''},
        {label: '行程日期', key: 'serviceType', val: '', placeholder: ''},
        {label: '行程地点', key: 'serviceType', val: '', placeholder: ''},
      ],
      textArea: [{label: '行程地点', key: 'serviceType', val: '', placeholder: ''}]
    }
  }

  export default {
    name: "bookingIndex",
    components:{},
    data() {
      const bizTypeList = ['flight', 'hotel', 'train', 'car', 'mark', 'meeting'].map(item => bizType[item])
      return {
        curTab: bizTypeList[0],
        orderList: [],
        navs: [],
        userInfo: [],
        bizType: bizTypeList
      }
    },
    mounted() {
    },
    methods:{
    }
  }
</script>

<style scoped>
  .booking-index-nav{
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: #fff;
    height: 360px;
  }
  .booking-index-nav-left{
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
  }
  .booking-index-nav-left > div {
    flex: 1 1 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    background-color: #2d8cf0;
    color: #fff;
    cursor: pointer;
    transition: all .3s;
  }
  .booking-index-nav-left > div:hover{
    opacity: .8;
  }

  .booking-index-nav-left > div.active{
    opacity: .6;
  }
  .booking-index-nav-right{
    flex: 1 1 0;
    position: relative;
    height: 100%;
    overflow: hidden;
  }
  .booking-index-nav-right > div {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    opacity: 0;
    transition: all .3s;
  }
  .booking-index-nav-right > div.active{
    z-index: 2;
    opacity: 1;
  }
  .booking-index-nav-tab{
    display: flex;
    flex: 0 0 40px;
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    border-bottom: 1px solid #eee;
  }
  .booking-index-nav-tab > div{
    padding: 0 20px;
    color: #2d8cf0;
  }
  .booking-index-nav-cont{
    flex: 1 1 0;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    transition: all .3s;
  }
  .booking-index-nav-cont > div{
    flex: 0 0 100%;
  }
  .user-info{
    height: 100%;
    flex: 0 0 220px;
    padding: 10px;
    border-left: 1px solid #eee;
  }
  .user-info>div{
    padding: 6px 10px;
    display: flex;
  }
  .user-info>div>span:last-child{
    flex: 1 1 0;
    text-align: right;
    padding-left: 10px;
  }
</style>
